{{ 'article.min.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign article_img_aspect_ratio = article.image.src.aspect_ratio

  if article.image.src.aspect_ratio == nil
    assign article_img_aspect_ratio = 1
  endif
-%}
<div class="container mb-7 mb-md-9">
  <article>
    <div class="row pt-6 pt-md-9">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'title'-%}
            <div class="offset-md-2 col-12 col-md-8">
              <div class="text-muted {% if block.settings.show_author or block.settings.show_date or block.settings.show_tag and article.tags != blank%} mb-2 mb-md-4{% endif %}">
                {% render 'article-author-date-tag',
                  article: article,
                  show_author: block.settings.show_author,
                  show_date: block.settings.show_date,
                  show_tag: block.settings.show_tag
                %}
              </div>
              <h1 class="mb-6">{{ article.title | escape }}</h1>
            </div>
          {%- when 'featured_image'-%}
            {%- if article.image -%}
              <div class="col-12 mb-6">
                {%- liquid
                  case block.settings.image_height
                    when 'adapt_to_image'
                      assign img_class = ''
                    when 'small'
                      assign img_class = 'figure-small'
                    when 'medium'
                      assign img_class = 'figure-medium'
                    else
                      assign img_class = 'figure-large'
                  endcase
                  -%}
                <figure class="mb-0 ratio figure {{ img_class }}" {% if block.settings.image_height == 'adapt_to_image' %}style="--se-aspect-ratio: {{ 1 | divided_by: article_img_aspect_ratio | times: 100 }}%;"{% endif %}>
                  <picture>
                    <img srcset="
                    {{ article.image.src | img_url: '350x' }} 350w,
                    {{ article.image.src | img_url: '390x' }} 390w,
                    {{ article.image.src | img_url: '430x' }} 430w,
                    {{ article.image.src | img_url: '480x' }} 480w,
                    {{ article.image.src | img_url: '720x' }} 720w,
                    {{ article.image.src | img_url: '780x' }} 780w,
                    {{ article.image.src | img_url: '860x' }} 860w,
                    {{ article.image.src | img_url: '960x' }} 960w,
                    {{ article.image.src | img_url: '1200x' }} 1200w,
                    {{ article.image.src | img_url: '1440x' }} 1440w,
                    {{ article.image.src | img_url: '1920x' }} 1920w,
                    {{ article.image.src | img_url: '2400x' }} 2400w"
                      sizes="(min-width: 1264px) 1200px, (min-width: 1024px) 960px, (min-width: 768px) 720px, (min-width: 600px) calc(100vw - 48px), (min-width: 512px) 480px, calc(100vw - 32px)"
                      src="{{ article.image | img_url: '1100x' }}"
                      loading="lazy"
                      width="{{ article.image.width }}"
                      height="{{ article.image.height }}"
                      alt="{{ article.image.alt | escape }}"
                      class="w-100 h-100 object-fit-cover">
                  </picture>
                </figure>
              </div>
            {%- endif -%}
          {%- when 'content'-%}
            <div class="offset-md-2 col-12 col-md-8 richtext-description mb-5 mb-md-6 pb-md-2">
              {{ article.content }}
            </div>
          {%- when 'social_sharing'-%}
            <div class="offset-md-2 col-12 col-md-8 mb-5 gray-600">
              {% render 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image  %}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
    <div class="row">
      <div class="offset-md-2 col-12 col-md-8">
        <a {% if blog.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %}  href="{{ blog.url }}" class="text-decoration-none fw-bold link-primary icon-wrap-sm  d-flex align-items-center">
          {% render 'icon-chevron-left' %}
          <span>
            {{ 'blogs.article.back_to_blog' | t: title: blog.title }}
          </span>
        </a>
      </div>
    </div>
  </article>
</div>
{% render 'structured-article' %}

{% schema %}
{
  "name": "Blog post",
  "tag": "section",
  "class": "main-article",
  "blocks": [
    {
      "type": "title",
      "name": "Title",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_tag",
          "default": true,
          "label": "Show tag"
        },
        {
          "type": "checkbox",
          "id": "show_date",
          "default": true,
          "label": "Show date"
        },
        {
          "type": "checkbox",
          "id": "show_author",
          "default": true,
          "label": "Show author"
        }
      ]
    },
    {
      "type": "featured_image",
      "name": "Featured image",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "image_height",
          "label": "Image height",
          "options": [
            {
              "value": "adapt_to_image",
              "label": "Adapt to image"
            },
            {
              "value": "small",
              "label": "Small"
            },
            {
              "value": "medium",
              "label": "Medium"
            },
            {
              "value": "large",
              "label": "Large"
            }
          ],
          "default": "adapt_to_image"
        }
      ]
    },
    {
      "type": "content",
      "name": "Content",
      "limit": 1
    },
    {
      "type": "social_sharing",
      "name": "Social share buttons"
    }
  ]
}
{% endschema %}
